<template>
  <div class="user-info-container">
    <div class="form-header">
      <div class="header-icon"></div>
      <div class="header-title">个人资料</div>
      <div class="train-decoration"></div>
    </div>
    
    <el-form ref="form" :model="form" :rules="rules" label-width="85px" class="user-form">
      <el-form-item label="用户昵称" prop="nickName">
        <el-input 
          v-model="form.nickName" 
          maxlength="30" 
          prefix-icon="el-icon-user"
          class="custom-input"
          placeholder="请输入用户昵称"
        />
      </el-form-item> 
      
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input 
          v-model="form.phonenumber" 
          maxlength="11" 
          prefix-icon="el-icon-phone"
          class="custom-input"
          placeholder="请输入手机号码"
        />
      </el-form-item>
      
      <el-form-item label="邮箱" prop="email">
        <el-input 
          v-model="form.email" 
          maxlength="50" 
          prefix-icon="el-icon-message"
          class="custom-input"
          placeholder="请输入邮箱地址"
        />
      </el-form-item>
      
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex" class="custom-radio-group">
          <el-radio label="0" class="custom-radio">男</el-radio>
          <el-radio label="1" class="custom-radio">女</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item class="form-buttons">
        <el-button 
          type="primary" 
          @click="submit"
          class="submit-btn"
        >
          <i class="el-icon-check"></i> 保存
        </el-button>
        <el-button 
          @click="close"
          class="cancel-btn"
        >
          <i class="el-icon-close"></i> 取消
        </el-button>
      </el-form-item>
      
      <div class="form-decoration">
        <div class="decoration-track"></div>
        <div class="decoration-train"></div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { updateUserProfile } from "@/api/system/user";

export default {
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      form: {},
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    user: {
      handler(user) {
        if (user) {
          this.form = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex };
        }
      },
      immediate: true
    }
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.user.nickName = this.form.nickName;
            this.user.phonenumber = this.form.phonenumber;
            this.user.email = this.form.email;
            this.user.sex = this.form.sex;
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>

<style lang="scss" scoped>
.user-info-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: fadeIn 0.5s ease-out;
  
  .form-header {
    position: relative;
    padding: 0 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f5f9ff 0%, #ecf5ff 100%);
    
    .header-icon {
      width: 22px;
      height: 22px;
      background: linear-gradient(135deg, #3a5e82 0%, #4682b4 100%);
      border-radius: 50%;
      margin-right: 10px;
      position: relative;
      box-shadow: 0 2px 5px rgba(58, 94, 130, 0.3);
      
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #3a5e82;
      margin: 15px 0;
      background: linear-gradient(90deg, #3a5e82, #4682b4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .train-decoration {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      width: 35px;
      height: 12px;
      background: linear-gradient(135deg, #3a5e82 0%, #4682b4 100%);
      border-radius: 4px 10px 10px 4px;
      opacity: 0.7;
      
      &:before {
        content: "";
        position: absolute;
        bottom: -2px;
        right: 5px;
        width: 25px;
        height: 4px;
        background-color: rgba(58, 94, 130, 0.3);
        border-radius: 2px;
      }
      
      &:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 5px;
        width: 4px;
        height: 4px;
        background-color: rgba(255,255,255,0.7);
        border-radius: 50%;
      }
    }
  }
  
  .user-form {
    padding: 25px 20px 30px;
    position: relative;
    
    .custom-input {
      margin-bottom: 5px;
      
      ::v-deep .el-input__inner {
        border-radius: 6px;
        border-color: #dcdfe6;
        padding-left: 35px;
        height: 38px;
        transition: all 0.3s;
        
        &:focus {
          border-color: #4682b4;
          box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.2);
        }
        
        &:hover {
          border-color: #c0c4cc;
        }
      }
      
      ::v-deep .el-input__prefix {
        left: 10px;
        color: #909399;
      }
    }
    
    .custom-radio-group {
      ::v-deep .el-radio {
        margin-right: 20px;
        
        .el-radio__input.is-checked .el-radio__inner {
          background-color: #3a5e82;
          border-color: #3a5e82;
        }
        
        .el-radio__input.is-checked + .el-radio__label {
          color: #3a5e82;
        }
        
        .el-radio__inner:hover {
          border-color: #3a5e82;
        }
      }
    }
    
    .form-buttons {
      margin-top: 15px;
      
      .submit-btn {
        background: linear-gradient(135deg, #3a5e82 0%, #4682b4 100%);
        border: none;
        padding: 9px 20px;
        font-size: 14px;
        border-radius: 6px;
        box-shadow: 0 3px 8px rgba(58, 94, 130, 0.3);
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 12px rgba(58, 94, 130, 0.4);
        }
        
        &:active {
          transform: translateY(1px);
          box-shadow: 0 2px 6px rgba(58, 94, 130, 0.3);
        }
      }
      
      .cancel-btn {
        margin-left: 15px;
        border-color: #dcdfe6;
        color: #606266;
        padding: 9px 20px;
        font-size: 14px;
        border-radius: 6px;
        transition: all 0.3s;
        
        &:hover {
          color: #3a5e82;
          border-color: #c2d7eb;
          background-color: #f5f9ff;
        }
      }
    }
    
    .form-decoration {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px;
      overflow: hidden;
      
      .decoration-track {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-image: repeating-linear-gradient(90deg, 
          transparent, transparent 10px, 
          #3a5e82 10px, #3a5e82 15px);
        opacity: 0.25;
        animation: trackMove 20s linear infinite;
      }
      
      .decoration-train {
        position: absolute;
        bottom: 6px;
        left: -30px;
        width: 25px;
        height: 8px;
        background: linear-gradient(135deg, #3a5e82 0%, #4682b4 100%);
        border-radius: 4px 10px 10px 4px;
        animation: miniTrainMove 12s linear infinite;
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        
        &:before {
          content: "";
          position: absolute;
          bottom: -2px;
          right: 5px;
          width: 15px;
          height: 3px;
          background-color: rgba(58, 94, 130, 0.2);
          border-radius: 2px;
        }
        
        &:after {
          content: "";
          position: absolute;
          top: 2px;
          left: 4px;
          width: 3px;
          height: 3px;
          background-color: rgba(255,255,255,0.7);
          border-radius: 50%;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trackMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(50px); }
}

@keyframes miniTrainMove {
  0% { left: -30px; opacity: 1; }
  80% { opacity: 1; }
  98% { opacity: 0; left: 100%; }
  99% { opacity: 0; left: -30px; }
  100% { left: -30px; opacity: 1; }
}

@media (max-width: 768px) {
  .user-info-container {
    .form-header {
      padding: 0 15px 12px;
      
      .header-title {
        font-size: 16px;
      }
    }
    
    .user-form {
      padding: 15px 15px 30px;
    }
  }
}
</style>
